<script setup lang="ts">
import {messageStore} from "~/store/messageStore";

definePageMeta({
  layout:'index-page-layout'
})
const exit=()=>{
  localStorage.clear()
  userStore().setToken('')
  bottomBarStore().index=0
  clearInterval(webSocketStore().getWS()?.getInternal())
  webSocketStore().getWS()?.getWebSocket()?.close()
  webSocketStore().ws=null
  navigateTo('/login')
}

const avatar=ref('')
const userName=ref('')
const role=ref(0)
let userId:string=''

onMounted(function (): void {
  barTitleStore().setTitle('个人中心')
  cFetch<User>(`/account/api/verifyToken`,{
    auth:true,
    defaultOpts:{
      method:'POST',
    }
  }).then(res=>{
    let user:User = res.data[0]
    avatar.value=user.avatar
    role.value=user.role
    userName.value=user.username
    userId=user.id
  })
})

let config=useRuntimeConfig()
function replaceURL(url:string):string{
  if(url===config.public.defaultUserAvatarURL)return url
  return config.public.enableReplaceImgURL?url.replace(config.public.oldImgHost,config.public.newImgHost):url
}

function goStatistics(){
  navigateTo({
    path:`/person/statistics`,
    query:{
      currentId:userId,
      userName:userName.value,
    }
  })
}

function goVehicle(){
  navigateTo({
    path:`/person/carInfo`,
    query:{
      r:role.value,
    }
  })
}
function goVerify(){
  navigateTo({
    path:'/person/driveVerify',
    query:{
      r:role.value,
    }
  })
}
function showAbout(){
  showDialog({
    title: '关于',
    message: '软件名：小马顺风车\nVersion：1.0.0\n内容更新：敬请期待……\nICP备案号：xxxxxxxxxxxxxx',
    messageAlign:'left'
  }).then(() => {
    // on close
  });
}
function goMyMessage(){
  navigateTo('/person/myMessage')
  messageStore().hasNew=false
}
</script>

<template>


  <div class="header" >
    <div class="avatar">
      <van-image
          round
          fit="cover"
          width="5rem"
          height="5rem"
          :src="replaceURL(avatar?avatar:config.public.defaultUserAvatarURL)"
      />
    </div>
    <div class="info">
      <h3 style="margin: 6px">
        {{userName}}
      </h3>
      <span style="margin: 6px">
        车主认证：
        <span v-if="role===1" style="color: green">已认证</span>
        <span v-else-if="role===0" style="color: #d10505">未认证</span>
      </span>
    </div>
  </div>

  <van-cell title="修改密码" @click="navigateTo('/person/alertPwd')" is-link />
  <van-cell title="修改头像" @click="navigateTo('/person/alertAvatar')" is-link />
  <van-cell title="收款码" @click="navigateTo('/person/alertPaycode')" is-link />
<!--  <van-cell title="完善资料" is-link />-->
  <van-cell @click="goMyMessage" is-link >
    <template #title>
      <span>我的消息</span>
      <van-badge v-if="messageStore().hasNew" dot/>
    </template>
  </van-cell>

  <van-cell title="车辆信息" @click="goVehicle" is-link />
<!--  <van-cell title="实名认证" is-link />-->
  <van-cell title="车主认证" @click="goVerify" is-link />
  <van-cell title="行程统计" @click="goStatistics" is-link />
  <van-cell title="退出登录" @click="exit" is-link />
  <van-cell title="关于" @click="showAbout" is-link />
</template>

<style scoped>
.header{
  display: flex;
  flex-direction: row;
  width: 90%;
  border-radius: 10px;
  background-color: #d6d5d5;
  margin: 2%;
  padding: 10px;
}
.avatar{
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.info{
  display: flex;
  flex-direction: column;
  flex: 4;
  padding: 6px;
}
</style>